<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/another.css" />
    <script src="/checkAuth.js" type="module"></script>
    <script src="/displayBalance.js" type="module"></script>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
      (function (m, e, t, r, i, k, a) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        m[i].l = 1 * new Date();
        for (var j = 0; j < document.scripts.length; j++) {
          if (document.scripts[j].src === r) {
            return;
          }
        }
        (k = e.createElement(t)),
          (a = e.getElementsByTagName(t)[0]),
          (k.async = 1),
          (k.src = r),
          a.parentNode.insertBefore(k, a);
      })(
        window,
        document,
        "script",
        "https://mc.yandex.ru/metrika/tag.js",
        "ym"
      );

      ym(97272843, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
      });
    </script>
    <noscript
      ><div>
        <img
          src="https://mc.yandex.ru/watch/97272843"
          style="position: absolute; left: -9999px"
          alt=""
        /></div
    ></noscript>
    <!-- /Yandex.Metrika counter -->
  </head>
  <body>
    <div class="navbar">
      <a class="tab" id="home" href="/">
        <img src="/image/house.svg" />
        <label for="home">Главная</label>
      </a>
      <a class="tab mButton" id="pay" href="/pay/">
        <img src="/image/wallet2.svg" />
        <label for="pay">Баланс</label>
      </a>
      <a class="tab mButton" id="schedule" href="/schedule/"
        ><img src="/image/calendar-week.svg" />
        <label for="schedule">Расписание</label>
      </a>
      <a class="tab" id="item" href="/items/"
        ><img src="/image/mortarboard.svg" />
        <label for="item">Предметы</label>
      </a>
      <a class="tab" id="another"
        ><img src="/image/three-dots-1.svg" />
        <label for="another">Еще</label>
      </a>
    </div>

    <div class="header">
      <div class="header2">
        <div class="circle">
          <p class="circleName"></p>
        </div>
        <div class="nameHeader">
          <span id="displayName"></span>
          <img src="/image/chevron-right.svg" />
        </div>
      </div>
      <div class="balanceHeader">
        <div style="display: flex; align-items: center">
          <p id="headerRub">0</p>
          <p>₽</p>
        </div>
        <div style="display: flex; align-items: center">
          <p id="headerEuro">0</p>
          <p>€</p>
        </div>
      </div>
    </div>

    <div class="main" id="firstMain">
      <h1>Ввести промокод</h1>
      <div class="fieldPromo">
        <h3>Ввести промокод</h3>
        <img src="/image/chevron-right.svg" />
      </div>

      <h1>Еще</h1>
      <div class="field" id="pickRefProgram">
        <div class="sevenFeetUnderKeel">
          <h2>Реферальная программа</h2>
          <p class="tooltip">
            Ваш бонус за приглашенных друзей и промокод для реферальной
            программы
          </p>
        </div>

        <div class="circleField">
          <img src="/image/gift.svg" />
        </div>
      </div>
      <div class="field" id="pickPromo">
        <div class="sevenFeetUnderKeel">
          <h2>Акции</h2>
          <p class="tooltip">
            Как получить дополнительные рубли и минуты на счет
          </p>
        </div>
        <div class="circleField">
          <img src="/image/credit-card-2-back.svg" />
        </div>
      </div>
      <div class="field">
        <div class="sevenFeetUnderKeel">
          <h2>Чат с координатором</h2>
          <p class="tooltip">Связаться с координатором и задать вопрос</p>
        </div>

        <div class="circleField">
          <img src="/image/chat-dots-1.svg" />
        </div>
      </div>

      <div class="contactUs">
        <a href="https://www.instagram.com/care_my_baby/" target="_blank"
          ><img src="/image/instagram.svg" class="imageContact" alt="instagram"
        /></a>
        <a
          href="https://www.youtube.com/channel/UCnmtLEqfg4bHlzYkp_E94Rw"
          target="_blank"
          ><img src="/image/youtube.svg" class="imageContact" alt="youtube"
        /></a>
        <a href="https://vk.com/care_my_baby" target="_blank"
          ><img src="/image/vk.svg" class="imageContact" alt="vk"
        /></a>
        <a href="https://t.me/CareMyBabyonline" target="_blank"
          ><img src="/image/telegram.svg" class="imageContact" alt="telegram"
        /></a>
      </div>
    </div>
    <div class="alertPopUp">
      <!-- <div class="windowPopContent">
        <p>Сообщение отправленно</p>
      </div> -->
    </div>
    <div class="main classHide" id="thirdMain">
      <h1>Реферальная программа</h1>
      <h2>Ваша персональная ссылка</h2>
      <p>
        Отправьте её друзьям, они выберут предмет и попробуют первое занятие
        бесплатно. А вы получите бонус, когда они пополнят депозит.
      </p>
      <div class="fieldCopyPromo">
        <p id="selfPromo">Промокод</p>
        <img src="/image/copy.svg" alt="copy" />
      </div>
      <button id="share">Поделиться</button>
      <h2>Ваши бонусы по реферальной программе</h2>
      <!-- <div class="innerPromo"></div> -->
      <div class="infoContent">
        <div class="classContent">
          <h1>0</h1>
          <p>Приглашено друзей</p>
        </div>
        <div class="classContent">
          <h1>0</h1>
          <p>Друзей принесли бонус</p>
        </div>
        <div class="classContent">
          <h1>0</h1>
          <p>Бонусов получено</p>
        </div>
      </div>
      <p class="link">Подробные условия реферальной программы</p>
    </div>
    <div class="main classHide" id="secondMain">
      <h1>Акции</h1>
      <div class="innerPromo"></div>
    </div>
    <div id="referrerPromo" class="referrer">
      <div class="bPopupContent">
        <div class="flex">
          <img src="/image/Union.svg" alt="close" id="closePromoButton" />
        </div>
        <h1>Промокод</h1>
        <input class="MyInput" type="text" placeholder="Ваш промокод" />
        <button id="activationPromoBtn">Активировать</button>
      </div>
    </div>

    <script src="./script.js" type="module"></script>
  </body>
</html>
